<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        {# 声明页面标题对应的模板片段 #}
        <title>{% block title %}{% endblock %}</title>
        <link rel="icon" href="/images/kaifamiao.jpg" type="image/x-icon">
        <link rel="shortcut icon" href="/images/kaifamiao.jpg" type="image/x-icon">
        {# 声明CSS对应的模板片段 #}
        {% block css %}
        <!-- Bootstrap -->
        <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
        <!-- FontAwesome -->
        <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
        <!-- Header Style -->
        <link rel="stylesheet" href="/stylesheets/header.css">
        <!-- Footer Style -->
        <link rel="stylesheet" href="/stylesheets/footer.css">
        {% endblock %}
        {# 声明JavaScript对应的模板片段 #}
        {% block js %}
        <!-- jQuery -->
        <script type="text/javascript" src="/jquery/jquery-3.6.0.js"></script>
        {% endblock %}
    </head>
    <body>

        {% include "header.njk" %}

        {# 声明页面主区域对应的模板片段 #}
        {% block main %}
            主区域
        {% endblock %}

        {% include "footer.njk" %}
        
    </body>
</html>